프로젝트 최적화 사전 개념 | 크롬 분석 툴 (라이트하우스, 퍼포먼스 등)

웹 성능 최적화 관점

• 로딩 성능
• 서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드 할 때의 성능
• HTML, JS, CSS, image 등 파일의 크기가 너무 크면 다운로드 하는데 오래 걸려 웹 페이지가 느리게 표시됨
• 개선 방법은 다운로드 해야하는 리소스를 줄이거나 크기를 줄이는 것
코드를 분활하여 다운로드 또는 리소스에 우선순위를 매겨 중요한 리소스 먼저 다운 받기

• 렌더링 성능
• 다운로드한 리소스를 가지고 화면을 그릴 때의 성능을 말함
코드를 실행하여 화면에 보여 주는 과정
• 렌더링 성능에 가장 큰 영향은 자바스크립트 코드
얼마나 효율적으로 작성했는지에 따라 화면이 그려지는 속도 및 인터랙션의 자연스러운 정도가 달라짐
• 개선 방법은 다양한 방법이 있으며, 브라우저의 동작 원리나 프레임워크의 라이프사이클 등 웹 개발의 기본 지식이 필요

크롬 개발 툴

• 네트워크 패널
현재 웹 페이지에서 발생하는 모든 네트워크 트랙픽을 상세하게 알려줌
어떤 리소스가 어느 시점에 로드되는지, 리소스 크기 등 알 수 있음

• Performance 패널
• 웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줌
• 리소스가 로드되는 타이밍
• 브라우저의 메인 스레드에서 실행되는 JS 를 차트 형태로 볼 수 있음
⇒ 해당 패널을 통해 어떤 JS가 코드가 느린지 확인할 수 있음

• Lighthouse 패널
• 웹 사이트의 성능을 측정하고 개선 방향을 제시해 주는 툴
성능 점수를 측정하고 개선 가이드를 확인하여 어떤 부분을 중점적으로 분석하고 최적화하는 알 수 있음
이미지

Lighthouse 구성 요소

Mode

• Navigation
Lighthouse 의 기본 값, 초기 페이지 로딩 시 발생하는 성능 문제를 분석

• Timespan
사용자가 정의한시간 동안 발생한 성능 문제를 분석

• Snapshot
현재 상태의 성능 문제를 분석

Categories

• Performance
웹 페이지의 로딩 과정에서 발생하는 성능 문제를 분석

• Accessibility
서비스의 사용자 접근성 문제를 분석

• Best practices
웹 사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석

• SEO
검색 엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는지 분석

• Progressive Web App
서비스 워커와 오프라인 동작 등, PWA와 관련된 문제를 분석

Device

• 모바일을 선택하면 좀 더 느린 CPU 와 네트워크 환경 사용

• Lighthouse 분석시 성능을 선택할 수 있음!?

검사 결과 : Web Vitals

• 최종 점수인 Performance 와 여섯 가지 지표 METRICS 로 구성

FCP (First Contentful Paint)

• 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째부분을 렌더링 하는 데걸리는 시간에 관한 지표

• 총점을 계산할 때 10% 가중치

Speed Index (SI)

• 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표

• 총점을 계산할 때 10% 가중치

Lagest Contentful Paint (LCP)

• 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간의 지표

• 총점을 계산할 때 25% 가중치

Time to Interactive (TTI)

• 사용자가 페이지와 상호 작용이 가능한 시점까지는 걸리는 시간의 지표
화면이 그려지더라도 JS 코드가 실행되지 않으면 클릭 등 상호작용이 일어나지 않는데 상호작용이 가능한 시간을 의미

• 총점을 계산할 때 10% 가중치

Total Blocking Time (TBT)

• 페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간을 나타내는 지표
💡 FCP 와 TTI 사이의 시간 동안 일어나며 메인 스레드를 독점하여 다른 동작을 방해하는 작업에 걸린 시간의 총합
⇒ 💡 FCP 와 TTI 사이의 시간 ??

• 총점을 계산할 때 30% 가중치

Cumulative Layout Shift (CLS)

• 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표
❓ 레이아웃 이동이란?
💡 화면상에서 요소의 위치나 크기가 순간적으로 변하는 것!

• 총점을 계산할 때 15% 가중치

검사 결과 - OPPORTUNITIES, DIAGNOSTICS

• OPPORTUNITIES
페이지를 더욱 빨리 로드하는데 잠재적으로 도움되는 제안을 나열

• DIAGNOSTICS
로드 속도와 직접적인 관계는 없지만, 성능과 관련된 기타 정보를 보여줌

검사 결과 - OPPORTUNITIES, DIAGNOSTICS

• CPU throttling : CPU 성능 제한
• 1x : 제한 없음. 데스크탑
• 4x : 모바일 선택시.

• Network throttling : 네트워크 속도 제한

Performance 패널

사전 정보? preformance 을 봐야하는 과정?

Lighthouse의 Diagnostics 섹션을 살펴봄 - 'Reduce Javascript execution time' 항목을 살펴봄

1.chunk.js 파일의 실행이 오래걸림

느린 작업을 식별하기 위해 Performance 탭을 살펴봄

💡

View Original Trace로 이동 시 상세 정보가 누락된 경우도 있음. 퍼포먼스 패널로 이동해서 새로고침으로 분석 서비스 상태를 좀 더 상세히 보려면 네트워크 설정을 Fast 3G로 설정

1. CPU 차트, Network 차트, 스크린샷

CPU 차트

• 시간에 따라 CPU 가 어떤 작업에 리소스를 사용하고 있는지 비율로 보여줌

• 자바스크립트 실행 작업은 노락색
렌더링/레이아웃 작업은 보라색
페인팅 작업은 초록색
기타 시스템 작업은 회색
빨간색 선은 병목이 발생하는 지점
⇒ 특정 작업이 메인스레드를 오랫동안 잡아 두고 있다는 의미

네트워크 차트

• CPU 차트 밑에 막대 형태로 표시

• 네트워크 상태를 보여줌
위쪽 진한 막대는 우선순위가 높은 네트워크 리소스
아래쪽의 옅은 막대는 우선순위가 낮은 테으워크 리소스를 나타냄

스크릿샷 리스트

• 서비스가 로드되는 과정을 보여줌

2. Network 타임라인

• 1의 네트워크 패널과 유사하게 서비스 로드 과정에서의 네트워크 요청 시간 순서를 보여줌

• 왼쪽 회색 선 :초기 연결 시간
막대의 옅은 색 영역 : 요청을 보내 시점부터 응답을 기다리는 시점까지의 시간 (TTFB, Time to Fisrt Byte)
막대의 짙은 색 영역 : 콘텐츠 다운로드 시간
오른쪽 회색 선 : 해당 요청에 대한 메인 스레드의 작업 시간

3. Frames, Timings, Main

Frames 섹션

• 화면의 변화가 있을 때마다 스크린 샷을 찍어 보여줌

Timings 섹션

• User Timing API 를 통해 기록된 정보를 기록

Main 섹션

• 브라우저의 메인 스레드에서 실행되는 작업을 플레임 차트로 보여줌

4. 하단 탭

Summary 탭

• 선택 영역에서 발생한 작업 시간의 총합과 각 작업이 차지하는 비중을 보여줌

Bottom Up 탭

• 가장 최하위에 있는 작업부터 상위 작업까지 역순으로 보여 줌

Call Tree

• Bottom up 과 반대로 가장 상위 작업부터 하위 작업순으로 작업 내용을 보여줌

• Bottom Up 과 비슷한데 스택 대신 작업의 순서 및 의존성을 고려해서 계층별로 보여줌?

Event Log

• 발생한 이벤트를 보여줌
• Loading
• Experience Scripting
→ 얘가 DOM 만드는건가? 모르겠다
• Rendering
렌더트리와 레이아웃
• Painting
컴포지트 + 페인트